<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html lang="en">
<head>
<base href="<%=basePath%>">
<meta charset="utf-8" />
<title>RSC - 在线寄件</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="" />
<meta name="author" content="stilearning" />

<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/bootstrap-responsive.css" rel="stylesheet" />
<link href="css/stilearn.css" rel="stylesheet" />
<link href="css/stilearn-responsive.css" rel="stylesheet" />
<link href="css/stilearn-helper.css" rel="stylesheet" />
<link href="css/stilearn-icon.css" rel="stylesheet" />
<link href="css/font-awesome.css" rel="stylesheet" />
<link href="css/animate.css" rel="stylesheet" />
<link href="css/uniform.default.css" rel="stylesheet" />

<link href="css/select2.css" rel="stylesheet" />
<link href="css/fullcalendar.css" rel="stylesheet" />
<link href="css/bootstrap-wysihtml5.css" rel="stylesheet" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<body>
	<!-- section header -->
	<header class="header">
		<!--nav bar helper-->
		<div class="navbar-helper">
			<div class="row-fluid">
				<!--panel site-name-->
				<div class="span10">
					<div class="panel-sitename">
						<h2>
							<a href="index2.html"><span class="color-teal">RSC</span>-System</a>
						</h2>
					</div>
				</div>
				<div class="span2">
					<!--panel button ext-->
					<div class="panel-ext">

						<div class="btn-group user-group">
							<a class="dropdown-toggle" data-toggle="dropdown" href="#"> <img
								class="corner-all" align="middle" src="img/user-thumb.jpg"
								title="John Doe" alt="john doe" /> <!--this for display on PC device-->
								<button class="btn btn-small btn-inverse">John Doe</button> <!--this for display on tablet and phone device-->
							</a>
							<ul class="dropdown-menu dropdown-user" role="menu"
								aria-labelledby="dLabel">
								<li>
									<div class="media">
										<a class="pull-left" href="#"> <img class="img-circle"
											src="img/user.jpg" title="profile" alt="profile" /> </a>
										<div class="media-body description">
											<p>
												<strong>John Doe</strong>
											</p>
											<p class="muted">13800000</p>
											<p class="action">
												<a class="link" href="alterinfo.html">Setting</a>
											</p>
											<a href="bonus-page/resume/index.html"
												class="btn btn-primary btn-small btn-block">View Profile</a>
										</div>
									</div>
								</li>
								<li class="dropdown-footer">
									<div>
										<a class="btn btn-small " href="login.html">Logout</a>
									</div>
								</li>
							</ul>
						</div>
					</div>
					<!--panel button ext-->
				</div>
			</div>
		</div>
		<!--/nav bar helper-->
	</header>

	<!-- section content -->
	<section class="section">
		<div class="row-fluid">
			<!-- span side-left -->
			<div class="span1">
				<!--side bar-->
				<aside class="side-left">
					<ul class="sidebar">
						<li class="active first"><a href="user.jsp" title="dashboard">
								<div class="helper-font-24">
									<i class="icofont-dashboard"></i>
								</div> <span class="sidebar-text">主页</span> </a></li>
						<li><a href="userInfo" title="interface">
								<div class="helper-font-24">
									<i class="icofont-magnet"></i>
								</div> <span class="sidebar-text">个人信息</span> </a></li>
						<li><a href="userParcels" title="grids">
								<div class="helper-font-24">
									<i class="icofont-columns"></i>
								</div> <span class="sidebar-text">我的包裹</span> </a></li>
					</ul>
				</aside>
				<!--/side bar -->
			</div>
			<!-- span side-left -->

			<!-- span content -->
			<div class="span11">
				<!-- content -->
				<div class="content">
					<!-- content-header -->
					<div class="content-header">
						<h2>
							<i class="icofont-home"></i>在线寄件
						</h2>
					</div>
					<!-- /content-header -->

					<!-- content-body -->
					<div class="content-body">
						<!-- dashboar -->
						<div class="container">
						  <form action="addParcel" method="post">
							<div class="span5 offset1">
								<div class="box corner-all">
									<div class="box-header grd-black color-white corner-top">
										<span>寄件信息</span>
									</div>
									<div class="box-body bg-white">
										<div class="control-group">
											<label class="control-label">寄件人</label>
											<div class="controls">
												<input type="text" class="input-block-level"
													data-validate="{required: true, messages:{required:'Please enter field username'}}"
													name="send_name" id="send_name" autocomplete="off" />
											</div>
										</div>
										<div class="control-group">
											<label class="control-label">联系电话</label>
											<div class="controls">
												<input type="text" class="input-block-level"
													data-validate="{required: true, messages:{required:'Please enter field password'}}"
													name="send_tel" id="send_tel" autocomplete="off" />
											</div>
										</div>
										<div class="control-group">
											<label class="control-label">寄件地址</label>
											<div class="controls">
												<input type="text" class="input-block-level"
													data-validate="{required: true, messages:{required:'Please enter field address'}}"
													name="send_addr" id="send_addr" autocomplete="off" />
											</div>
										</div>
										<div class="control-group">
											<label class="control-label">寄件邮编</label>
											<div class="controls">
												<input type="text" class="input-block-level"
													data-validate="{required: true, messages:{required:'Please enter field address number'}}"
													name="send_postcode" id="send_postcode"
													autocomplete="off" />
											</div>
										</div>
										<div class="control-group">
											<label class="control-label">包装计价：</label>
											<div class="controls">
												<input type="radio" name="size"
													id="optionsRadios1" value="1" checked=""/>专用信封包装（5元）
												<input type="radio" name="size"
													id="optionsRadios2" value="2" /> 小纸盒包装（6元） 
												<input type="radio" name="size"
													id="optionsRadios3" value="3" /> 中纸箱包装（10元） 
												<input type="radio" name="size"
													id="optionsRadios4" value="4" /> 大纸箱包装（15元）
											    <input type="radio" name="size"
													id="optionsRadios5" value="5" /> 超大纸箱包装（20元） 
											</div>
										</div>
										<div class="control-group">
											<label class="control-label">重量计价：(公斤)</label>
											<div class="controls">
												<input type="text" class="input-block-level"
													data-validate="{required: true, messages:{required:'Please enter field address number'}}"
													name="weight" id="weight"
													autocomplete="off" /> <label>1.1公斤内，没斤按3元计算 </label> <label>2.超过1公斤的，超过部分每斤4元计算
												</label> <label>3.超过1公斤的，超过部分每斤4元计算 </label> <label>4.超过5公斤的，超过部分每斤按8元计算。
												</label>
											</div>
										</div>
										<div class="control-group">
											<label class="control-label">付款方式：</label>
											<div class="controls">
												<input type="radio" name="pay_type"
													id="pay1" value="0" checked="" /> 邮客付款 
											    <input type="radio" name="pay_type"
													id="pay2" value="1" /> 对方付款
											</div>
										</div>
									</div>
								</div>
							</div>
							<!--/Sign In-->
							<!--Sign Up-->
							<div class="span5">
								<div class="box corner-all">
									<div class="box-header grd-red color-white corner-top">
										<span>收件信息</span>
									</div>
									<div class="box-body bg-white">
										<!-- <form id="sign-up" method="post" />-->
										<div class="control-group">
											<label class="control-label">收件人</label>
											<div class="controls">
												<input type="text" class="input-block-level"
													data-validate="{required: true, messages:{required:'Please enter field username'}}"
													name="receive_name" id="receive_name" autocomplete="off" />

											</div>
										</div>
										<div class="control-group">
											<label class="control-label">联系电话</label>
											<div class="controls">
												<input type="text" class="input-block-level"
													data-validate="{required: true, number:true, messages:{required:'Please enter field tel', email:'Please enter a valid tel'}}"
													name="receive_tel" id="receive_tel" autocomplete="off" />

											</div>
										</div>
										<div class="control-group">
											<label class="control-label">收件地址</label>
											<div class="controls">
												<input type="text" class="input-block-level"
													data-validate="{required: true, minlength: 6, messages:{required:'Please enter field address'}}"
													name="receive_addr" id="receive_addr" autocomplete="off" />

											</div>
										</div>
										<div class="control-group">
											<label class="control-label">收件邮编</label>
											<div class="controls">
												<input type="text" class="input-block-level"
													data-validate="{required: true, messages:{required:'Please enter field address number'}}"
													name="receive_postcode" id="receive_postcode"
													autocomplete="off" />
											</div>
										</div>
										<div class="form-actions">
											<input type="submit" class="btn btn-block btn-large btn-danger" value="确认登记" 
											onclick="return check();"/>
										</div>
									</div>
								</div>
							</div>
							</form>
							<!--/Sign Up-->
						</div>

						<div class="divider-content">
							<span></span>
						</div>
						<!-- tab resume content -->
						<div class="row-fluid">
							<!-- tab resume update -->
							<div class="span6"></div>
							<!-- tab resume update -->
							<div class="span6"></div>
						</div>
						<!-- tab stat -->
					</div>
					<!--/content-body -->
				</div>
				<!-- /content -->
			</div>
			<!-- /span content -->
		</div>
	</section>

	<!-- section footer -->
	<footer>
		<a rel="to-top" href="#top"><i class="icofont-circle-arrow-up"></i>
		</a>
	</footer>

	<!-- javascript
        ================================================== -->
	<!--<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>-->
	<script src="js/jquery.js"></script>
	<script src="js/jquery-ui.min.js"></script>
	<script src="js/bootstrap.js"></script>
	<script src="js/uniform/jquery.uniform.js"></script>
	<script src="js/peity/jquery.peity.js"></script>
	
	<script src="js/check/test.js"></script>

	<script src="js/select2/select2.js"></script>
	<script src="js/knob/jquery.knob.js"></script>
	<script src="js/flot/jquery.flot.js"></script>
	<script src="js/flot/jquery.flot.resize.js"></script>
	<script src="js/flot/jquery.flot.categories.js"></script>
	<script src="js/wysihtml5/wysihtml5-0.3.0.js"></script>
	<script src="js/wysihtml5/bootstrap-wysihtml5.js"></script>
	<script src="js/calendar/fullcalendar.js"></script>
	<!-- this plugin required jquery ui-->

	<!-- required stilearn template js, for full feature-->
	<script src="js/holder.js"></script>
	<script src="js/stilearn-base.js"></script>

	<script type="text/javascript">
        $(document).ready(function() {
                // try your js
                
                // normalize event tab-stat, we hack something here couse the flot re-draw event is any some bugs for this case
                $('#tab-stat > a[data-toggle="tab"]').on('shown', function(){
                    if(sessionStorage.mode == 4){ // this hack only for mode side-only
                        $('body,html').animate({
                            scrollTop: 0
                        }, 'slow');
                    }
                });
                
                // peity chart
                $("span[data-chart=peity-bar]").peity("bar");
                
                // Input tags with select2
                $('input[name=reseiver]').select2({
                    tags:[]
                });
                
                // uniform
                $('[data-form=uniform]').uniform();
                
                // wysihtml5
                $('[data-form=wysihtml5]').wysihtml5()
                toolbar = $('[data-form=wysihtml5]').prev();
                btn = toolbar.find('.btn');
                
                $.each(btn, function(k, v){
                    $(v).addClass('btn-mini')
                });
                
                // Server stat circular by knob
                $("input[data-chart=knob]").knob();
                
                // system stat flot
                d1 = [ ['jan', 231], ['feb', 243], ['mar', 323], ['apr', 352], ['maj', 354], ['jun', 467], ['jul', 429] ];
                d2 = [ ['jan', 87], ['feb', 67], ['mar', 96], ['apr', 105], ['maj', 98], ['jun', 53], ['jul', 87] ];
                d3 = [ ['jan', 34], ['feb', 27], ['mar', 46], ['apr', 65], ['maj', 47], ['jun', 79], ['jul', 95] ];
                
                var visitor = $("#visitor-stat"),
                order = $("#order-stat"),
                user = $("#user-stat"),
                
                data_visitor = [{
                    data: d1,
                    color: '#00A600'
                }],
                data_order = [{
                    data: d2,
                    color: '#2E8DEF'
                }],
                data_user = [{
                    data: d3,
                    color: '#DC572E'
                }],

                
                options_lines = {
                    series: {
                        lines: {
                            show: true,
                            fill: true
                        },
                        points: {
                            show: true
                        },
                        hoverable: true
                    },
                    grid: {
                        backgroundColor: '#FFFFFF',
                        borderWidth: 1,
                        borderColor: '#CDCDCD',
                        hoverable: true
                    },
                    legend: {
                        show: false
                    },
                    xaxis: {
                        mode: "categories",
                        tickLength: 0
                    },
                    yaxis: {
                        autoscaleMargin: 2
                    }

                };
                
                // render stat flot
                $.plot(visitor, data_visitor, options_lines);
                $.plot(order, data_order, options_lines);
                $.plot(user, data_user, options_lines);
                
                // tootips chart
                function showTooltip(x, y, contents) {
                    $('<div id="tooltip" class="bg-black corner-all color-white">' + contents + '</div>').css( {
                        position: 'absolute',
                        display: 'none',
                        top: y + 5,
                        left: x + 5,
                        border: '0px',
                        padding: '2px 10px 2px 10px',
                        opacity: 0.9,
                        'font-size' : '11px'
                    }).appendTo("body").fadeIn(200);
                }

                var previousPoint = null;
                $('#visitor-stat, #order-stat, #user-stat').bind("plothover", function (event, pos, item) {

                    if (item) {
                        if (previousPoint != item.dataIndex) {
                            previousPoint = item.dataIndex;

                            $("#tooltip").remove();
                            var x = item.datapoint[0].toFixed(2),
                            y = item.datapoint[1].toFixed(2);
                            label = item.series.xaxis.ticks[item.datapoint[0]].label;
                            
                            showTooltip(item.pageX, item.pageY,
                                label + " = " + y);
                        }
                    }
                    else {
                        $("#tooltip").remove();
                        previousPoint = null;            
                    }
                    
                });
                // end tootips chart
                
                
                // Schedule Calendar
                var date = new Date();
                var d = date.getDate();
                var m = date.getMonth();
                var y = date.getFullYear();

                var calendar = $('#schedule').fullCalendar({
                    header: {
                        left: 'title',
                        center: '',
                        right: 'prev,next today,month,basicWeek,basicDay'
                    },
                    events: [
                    {
                        title: 'Start a project',
                        start: new Date(y, m, 1)
                    },
                    {
                        title: 'interview and data collection',
                        start: new Date(y, m, 3),
                        end: new Date(y, m, 7)
                    },
                    {
                        title: 'Creating design interface',
                        start: new Date(y, m, 9),
                        end: new Date(y, m, 12)
                    },
                    {
                        title: 'Meeting',
                        start: new Date(y, m, 19, 10, 30),
                        allDay: false
                    },
                    {
                        title: 'Meeting',
                        start: new Date(y, m, 28, 10, 30),
                        allDay: false
                    },
                    {
                        title: 'Date',
                        start: new Date(y, m, d, 12, 0),
                        end: new Date(y, m, d, 14, 0),
                        allDay: false
                    },
                    {
                        title: 'Birthday Party',
                        start: new Date(y, m, d+1, 19, 0),
                        end: new Date(y, m, d+1, 22, 30),
                        allDay: false
                    }
                    ]
                });
                // end Schedule Calendar
            });

</script>
</body>
</html>
